<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>People List</title>
    <link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Custom Theme files -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/respond.js"></script>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
            });
        });
    </script>
    
    <script>
        $(function(){
            $(".hov").hide();
            $(".text").hide();
            $(".col-md-3").hover(function(){
                        $(this).find(".hov").stop().fadeTo(286,0.5)
                        $(this).find(".text").stop().show();
                    },
                    function(){
                        $(this).find(".hov").stop().fadeTo(286,0)
                        $(this).find(".text").stop().hide();
                        // $(this).find(".text").animate({left:"-286px"}, {duration: 0})
                    });
            $(".btn-sub").click(function(){
                alert("Sure to disband your group?");
            });
        });
    </script>
    <style>
        html {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body
        {
            margin: 0;
        }

        .main-nav-a a:hover{
            color:#ff5656;
        }

        .main-nav-a a:focus{
            color:#ff8e92;
        }

        a span
        {
            font-size: 20px;
            font-weight: 700;
        }

        /*********************************************自定义部分*********************************************/
        .secondmenu a {
            font-size: 12px;
            color: #4A515B;
            text-align: center;
            border-radius: 4px;
        }

        .secondmenu > li > a:hover {
            background-color: rgba(179,137,68,0.7);
            color: #ffffff;
        }

        .secondmenu>li.focus {
            background-color: rgba(222,202,196,0.5);
            border-radius: 4px;
            color:#ff5656;
        }

        .secondmenu li.focus > a {
            color: #ff5656;
        }


    </style>
</head>
<body>
<!-- header-section-starts -->

<div class="navigation-strip">
    <div class="container">
        <div class="nav_content">
            <div class="home">
                <a href="index.html"><img src="images/imangine.png" alt="" /></a>
            </div>
            <div class="search">
                <form>
                    <input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}"/>
                    <input type="submit" value="">
                </form>
            </div>
            <div class="reglogbar-user pull-right">
                <div class="userp">
                     <span>Jully Coco &nbsp;</span>
                    <a href="personal.html"> <img src="images/user-p.png" /> </a>
                </div>
            </div>
            <span class="menu"></span>
            <div class="top-menu">
                <ul>
                    <li><a href="pic.html">Picture</a></li>
                    <li><a href="album.html">Album</a></li>
                    <li><a href="group.html">Group</a></li>
                    <li><a href="search.html">Search</a></li>
                    <li><a href="about.html">About us</a></li>

                </ul>
            </div>
            <!-- script for menu -->
            <script>
                $( "span.menu" ).click(function() {
                    $( ".top-menu" ).slideToggle( "slow", function() {
                        // Animation complete.
                    });
                });
            </script>
            <!-- script for menu -->
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="col-md-11" id="userinfo">
                       <a href="single-group.html"><img id="albumprof" src="images/a1.jpg" /></a>
                        <br />
                        <br />
                        <h3>Stuff Name</h3>
                        <p>Stuff Description</p>
                        <br />
                    </div>
                </div>
                <div class="col-md-9 watchlist">
                    <div class="watchlista">Total &nbsp; <span>5</span> &nbsp; people
            </div>
                    <div class="watch-list">
                        <div class="row">
                            <span class="line2"></span>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row coverpageSelectMe">
                            <div class="coverpage"></div>
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>


                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="col-md-4 footer-grid">
                <h5>ABOUT US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor nulla, sodales quis posuere quis, tristique nec libero. Proin vitae convallis odio. Morbi nec enim nisi. Aliquam erat volutpat. </p>
            </div>
            <div class="col-md-4 footer-grid">
                
            </div>
            <div class="col-md-4 footer-grid">
                <h5>FOLLOW US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor! </p>


            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="copyrights">
                <p>Copyright &copy; 2015.Imangine All rights reserved.</p>
            </div>
            <div class="go-top">
                <a href="#header" class="scroll"><img src="images/go-to-top.png" alt="" /></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

</body>
</html>
